<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/qs.js"></script>
</head>
<body>
    <div id="app">
        <table border="1px" width="800px">
            <tr><th>编号</th><th>用户名</th><th>密码</th><th>昵称</th><th>手机号</th><th>图片</th></tr>
            <tr v-for="user in users" @click="editUser(user)">用户名
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.password}}</td>
                <td>{{user.nickname}}</td>
                <td>{{user.telephone}}</td>
                <td>{{user.icon}}</td>
                <td><button @click="deleteUser(user.id)">删除</button></td>
            </tr>
        </table>
        <!--分页按钮-->
        <button v-for="num in pages" @click="loadUsers(num)">{{num}}</button>
        <div>
            账号：<input type="text" v-model="user.username"><br>
            密码：<input type="password" v-model="user.password"><br>
            昵称：<input type="text" v-model="user.nickname"><br>
            手机：<input type="text" v-model="user.telephone"><br>
            图片：<input type="text" v-model="user.icon"><br>
            <button @click="saveUser">保存</button>
        </div>
    </div>
    <script>
        new Vue({
           el:"#app",
           data:{
               user:{"id":null,"username":"","password":"","nickname":"","telephone":"","icon":""},
               users:[], //用户列表
               current:1,
               size:5,
               pages:1
           },
            methods:{
               //分页查询
               loadUsers(current){
                   this.current = current;
                   axios.get("http://localhost:8080/users-page?current=" + this.current + "&size=" + this.size)
                       .then(result => {
                            console.log(result.data);
                            this.users = result.data.data.records;
                            this.pages = result.data.data.pages;
                   });
               },
                //保存用户
                saveUser(){
                   console.log(this.user);
                   //通过id是否为null，判断进行添加或更新
                    if(this.user.id == null){
                        axios.post("http://localhost:8080/user",this.user)
                            .then(result => {
                                if(result.data.data == "ok"){
                                    this.loadUsers(this.current);
                                }
                            });
                    }else{
                        axios.put("http://localhost:8080/user",this.user)
                            .then(result => {
                                if(result.data.data == "ok"){
                                    this.loadUsers(this.current);
                                }
                            });
                    }
                    //清空文本框
                    this.user = {"id":null,"username":"","password":"","nickname":"","telephone":"","icon":""};
                },
                //点击用户进行显示
                editUser(user){
                   this.user = JSON.parse(JSON.stringify(user));
                },
                deleteUser(id){
                   axios.delete("http://localhost:8080/user/" + id)
                       .then(result => {
                           if(result.data.data == "ok"){
                               this.loadUsers(this.current);
                           }
                       })
                }
            },
            mounted(){
               //页面加载时自动调用
                let token = localStorage.getItem("token");
                console.log("token=" + token);
                //携带token访问
                axios.defaults.headers.common['Authorization'] = token;
               this.loadUsers(1);
            }
        });
    </script>
</body>
</html>
